<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>controller</title>
<link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap.min.css">
<script src="../lib/jquery/jquery-1.10.2.js"></script>
<script src="../lib/angularjs/angular.min.js"></script>
<style>
    body{padding:50px 200px;}
</style>
<script>
    var app=angular.module("app01",[]);
</script>
</head>
<body ng-app="app01">
    <DIV CLASS="panel panel-success">
        <div class="panel-heading">例子一（传统做法）</div>
        <div class="panel-body">
            <div ng-controller="controller01">
                <input type="text" ng-model="main.name" />
                <span>{{ main.name }}</span>
            </div>
        </div>
        <script>
            app.controller('controller01', function() {});
        </script>
    </DIV>
    <DIV CLASS="panel panel-success">
        <div class="panel-heading">例子二</div>
        <div class="panel-body">
            <div directive02></div>
        </div>
        <script>
            app.directive('directive02', function() {
                return {
                    restrict: 'A',
                    template: '<h4><input ng-model="controller02.msg02">{{ controller02.msg02 }}</h4><input ng-model="msg02">{{msg02}}',
                    controllerAs: 'controller02',
                    controller: function($scope) {
                        $scope.msg02="23";
                        this.msg02 = "Hello World"
                    }
                };
            });
        </script>
    </DIV>
    <DIV CLASS="panel panel-success">
        <div class="panel-heading">例子三</div>
        <div class="panel-body">
            <div ng-controller="controller03">
                <input ng-model="main03.name">{{main03.name}}
            </div>
        </div>
        <script>
            app.controller('controller03',function () {
                this.name='name';
            });
            var main03 = new controller03();
        </script>
    </DIV>
    <DIV CLASS="panel panel-success">
        <div class="panel-heading">例子四</div>
        <div class="panel-body">
            <div>
                <input ng-model="main04.name">{{main04.name}}
            </div>
        </div>
        <script>
            var controller04 = function() {
                this.name = 'Some title';
            };
            var main04 = new controller04();
        </script>
    </DIV>
    <DIV CLASS="panel panel-success">
        <div class="panel-heading">例子五</div>
        <div class="panel-body">
            <div>
                <directive05></directive05>
            </div>
        </div>
        <script>
            app.directive('directive05', function() {
                return {
                    restrict: 'EA',
                    template: '<input ng-model="main05.name">{{main05.name}}',
                    controller: function() {
                        this.name = 'Some title';
                    },
                    controllerAs: 'main05'
                };
            });
        </script>
    </DIV>
</body>
</html>